
nav ul li:last-child {
    background-color: hsl(20, 50%, 30%);
}

footer ul li:nth-child(2) {
    background-color: hsl(20, 50%, 30%);
}

video {
    max-width: 100%;
    height: auto;
}

#video p {
    margin: 10px 10px;
}

.video {
    text-align: center;
}

.recommend-book-img {
    width: 250px;
    height: 250px;
    float: left;
}

.recommend-book {
    padding: 10px 10px 10px 10px;
    /*padding: 10px 2px 2px 2px;*/
    border: 1px solid brown;
    margin: 10px;
}

.recommend-book h3 {
    text-align: center;
    color: brown;
}

.description mark {
    color: white;
    background: brown;
}

.book-brown {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
}

#recommend {
    background-color: white;
    padding: 10px 2px 2px 2px;
}

#recommend h2 {
    color: brown;
}

/*.cart-more a {*/
/*    width: 100px;*/
/*    text-align: center;*/
/*    color: white;*/
/*    background: brown;*/
/*}*/

/*.cart-more {*/
/*    width: 600px;*/
/*    margin: 0 auto;*/
/*    text-align: center;*/
/*}*/

.cart-more button {
    width: 100px;
    text-align: center;
    height: 30px;
    background: brown;
    color: white;
}

/*.content {*/
/*    float: right;*/
/*}*/

#divStyle {
    color: orange;
}

/*标题图标，引用多种格式，满足不同设备和浏览器的需要*/
/*定义服务器端使用的图标字体*/
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*设置栏目标题图标样式*/
.icon-book, .icon-sale, .icon-new, .icon-sell, .icon-classify, .icon-partner, .icon-about, .icon-cart, .icon-contact {
    font-family: FontAwesome;
    font-size: 1.5rem;
    display: flex;
    /*https://www.cnblogs.com/hellocd/p/10443237.html*/
    align-items: center;
    float: left;
    margin-right: 0.5rem;
    font-weight: normal;
    color: hsl(20, 50%, 30%);
}

/*定义本周推荐、最近新书、最近促销、边栏广告、图书分类和合作伙伴的下边框为虚线。*/
#recommend, #new, #sales, #best-selling, #classify-partner, #about, #advert {
    border-bottom: hsl(0, 0%, 80%) dashed 1px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}


/*本周推荐标题图标*/
.icon-book:before {
    content: "\f02d";
}

p, a, span {
    font-size: 1rem
}

/*本周推荐、最近促销加入购物车、详细内容超连接*/
.cart {
    text-decoration: none;
    background: hsl(20, 30%, 50%);
    color: hsl(0, 0%, 100%);
    min-width: 120px;
    opacity: 0.7;
    display: flex;
    /*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
    /*总之就是flex的话 用这个居中就行了*/
    justify-content: center;
    /*不然的话 字就在左边了*/
    height: 30px;
    /*几个东西放的位置*/
    /*里面的字放在中间 不然的话就在上面了*/
    align-items: center;
    padding-bottom: 2px;
    margin-right: 2px;
}

.cart:hover {
    text-decoration: none;
    opacity: 1;
}

.more {
    text-decoration: none;
    background: hsl(20, 30%, 50%);
    color: hsl(0, 0%, 100%);
    min-width: 120px;
    opacity: 0.7;
    display: flex;
    justify-content: center;
    height: 30px;
    align-items: center;
    padding-bottom: 2px;
}

.more:hover {
    text-decoration: none;
    opacity: 1;
}


/*本周推荐，最近新书，最近促销水平方向伸缩，当到达最小宽度时换行。*/
.recommend-book .content, #new .content, #sales .content {
    display: flex;
    flex-flow: row wrap;
}

/*本周推荐图书封面和内容布局空间分配。*/
.recommend-book .content .cover {
    flex: 1;
    min-width: 260px;
}

.recommend-book .content .description {
    flex: 2;
    margin-right: 1rem;
}


/*最近新书和最近促销里的图像、加入购物车和详细内容链接居中*/
.effect-1 .image-box, .cart-more {
    display: flex;
    justify-content: center;
}

